<template>
    <div class="taskAdd">
        <span class="taskAdd-header">新建任务</span>
        <div class="taskAdd-row">
            <el-input class="taskAdd-row-title" placeholder="请输入标题" size="medium" v-model="taskForm.name" clearable>
            </el-input>
            <el-select ref="elSelect" class="taskAdd-row-type" v-model="taskForm.taskType" size="medium" clearable placeholder="请选择任务类型">
                <el-option v-for="item in taskTypeFrom" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="taskAdd-row">
            <project class="task-project" :name="taskForm.projName" @projectSelect="projectSelect"></project>
            <priority class="task-warehouse" :data="taskForm.matrix" @priorityChoose="priorityChoose"></priority>
            <el-select class="task-milepost"  @visible-change='visiblechange' v-model="taskForm.mptName" clearable size="medium" placeholder="请选择里程碑" value-key="mptId" :filter-method="remoteMpt" filterable @change="selectMpt">
                <el-option v-for="item in milepostForm" :key="item.mptId" :label="item.name" :value="item">
                </el-option>
            </el-select>
            <!-- <span style="color:rgb(230,180,169)" v-if="milepostForm.length==0&&this.taskForm.projId!=''">(该项目没有里程碑)</span> -->
            <!-- <personInCharge   ref="personInCharge" :projId='taskForm.projId' :master="taskForm.masterSysUser" :userList="taskForm.userList" @personChoose="personChoose" class="taskAdd-row-personInCharge"></personInCharge> -->
        </div>

        <selectRoleTwo type='warehouse' :parentProjId='taskForm.projId' selectType='singleChoice' style="width:910px;margin-top:20px" @selectsuccess='selectsuccess'></selectRoleTwo>
        <selectmember type='warehouse' :parentProjId='taskForm.projId' selectType='multipleChoice' style="width:910px;margin-top:20px" @selectsuccess='selectsuccessmamber'></selectmember>
        <div class="task-quillEditor">
            <el-input style="width: 910px;" type="textarea" :rows="6" placeholder="请输入简介" v-model="taskForm.content">
            </el-input>
        </div>
        <div class="task-multipleChoiceTags">
            <multipleChoiceTags :tags="taskForm.tags" @tagChoose="tagChoose" type="01" style="width: 100%;height: 100%">
            </multipleChoiceTags>
        </div>
        <span class="task-more">更多设置</span>
        <div class="taskAdd-row">
            <el-date-picker @change="startDateClick" style="width:300px" value-format="yyyy-MM-dd"  v-model="taskForm.startDate" type="date" size="medium" class="task-date" placeholder="开始日期">
            </el-date-picker>
            <el-date-picker @change="endDateClick" style="width:300px" value-format="yyyy-MM-dd" v-model="taskForm.endDate" type="date" size="medium" class="task-date" placeholder="截止日期">
            </el-date-picker>
            <!-- <el-input placeholder="预计工时（小时）" v-model="taskForm.taskTime" type="number" size="medium" class="task-time">
            </el-input> -->
        </div>
        <el-button class="task-save" size="medium" type="primary" @click="saveClick">新建</el-button>
        <el-button class="task-save" size="medium" @click="cencel">取消</el-button>
    </div>
</template>
<script>
import personInCharge from "../../../components/select/personInCharge";
import quillEditor from "../../../components/quillEditor/index";
import multipleChoiceTags from "../../../components/select/multipleChoiceTags";
import project from "../../../components/select/project.vue";
import priority from "../../../components/select/priority";
import selectmember from "@/components/screen/selectmember";
import selectRoleTwo from "@/components/screen/selectRoleTwo";
import { save } from "@/api/task";
import { list as gitList } from "@/api/git.js";
import { list as mptList } from "@/api/mpt.js";
import utils from "@/utils/utils";
export default {
    name: "TaskAdd",
    data() {
        return {
            taskTypeFrom: [
                {
                    value: "00",
                    label: "需求",
                },
                {
                    value: "01",
                    label: "设计",
                },
                {
                    value: "02",
                    label: "开发",
                },
                {
                    value: "04",
                    label: "测试",
                },
                {
                    value: "05",
                    label: "缺陷",
                },
                {
                    value: "06",
                    label: "其他",
                },
            ],
            warehouse: [],
            milepostForm: [],
            taskType: "",
            taskProject: "",
            taskWarehouse: "",
            taskMilepost: "",
            taskBranch: "",
            taskStartTime: "",
            taskClosingDate: "",
            taskTime: "",
            taskForm: {
                name: "", //名字
                taskLevel: "",
                taskLevelCode: "",
                taskType: "", //任务类型
                taskTime: "", //预计工时
                projId: "", //项目id
                projName: "", //项目名字
                // gitId: '', //仓库id
                // gitName: '', //仓库名字
                mptId: "", //里程碑id
                mptName: "", //里程碑名字
                content: "", //备注
                matrix: "02", //优先级
                startDate: "", //开始时间
                endDate: "", //结束时间
                userList: [], //协助人
                masterUserId: "", //负责人id
                masterUserName: "", //负责人名字
                tags: [], //标签
            },
            startPickerOptions: {},
            endPickerOptions: {},
        };
    },
    components: {
        personInCharge,
        quillEditor,
        multipleChoiceTags,
        priority,
        project,
        selectRoleTwo,
        selectmember,
    },
    created() {
        this.taskForm.projId = this.$route.query.projId;
        this.taskForm.projName = this.$route.query.projName;
        // this.loadMptList();
    },
    mounted() {},
    methods: {
        visiblechange(data){
            if(data==true){
                this.loadMptList()
            }

        },
        cencel() {
            this.$store
                .dispatch("tagsView/delView", this.$route)
                .then(({ visitedViews }) => {
                    if (this.$route.query.projId) {
                        this.$router.go(-1);
                    } else {
                        this.$router.push({ path: "/task/index" });
                    }
                }); // 关闭当前tab回到列表
        },
        // 控制选择时间范围
        endDateClick(data) {
            console.log(data);
            this.startPickerOptions = {
                disabledDate(time) {
                    return time.getTime() > new Date(data);
                },
            };
        },
        startDateClick(data) {
            console.log(data)
            this.endPickerOptions = {
                disabledDate(time) {
                    return time.getTime() < new Date(data);
                },
            };
        },
        // 保存任务
        saveClick() {
            var _this = this;
            console.log(_this.taskForm);
            if (!_this.taskForm.name) {
                _this.$message.error("请输入任务标题");
                return;
            }
            if (!this.taskForm.projId) {
                _this.$message.error("请选择关联项目");
                return;
            }
            save(_this.taskForm).then((res) => {
                //   this.$EventBus.$emit('updateDoc',docForm)
                 this.$EventBus.$emit('task-add',res)
                _this.$store.dispatch("tagsView/delView", _this.$route).then(({ visitedViews }) => {
                     if (this.$route.query.projId) {
                         	// this.$router.push({path: "/project/details",query:{projId:this.$route.query.id,dirId:this.$route.query.dirId}})
                        this.$router.go(-1);
                    }
                     else { _this.$router.push({ path: "/task/index",});}
                }); // 关闭当前tab回到列表
            });
        },
        // 项目选择
        projectSelect(data) {
            console.log(data);
            if (this.taskForm.projId == data.projId) {
                return;
            }
            this.taskForm.projId = data.projId;
            this.taskForm.projName = data.name;
            this.taskForm.masterSysUser = null;
            this.taskForm.userList = [];
        },
        // 仓库选择
        loadGitList(data) {
            var _this = this;
            var name = "";
            if (data) {
                name = data;
            } else {
                name: "";
            }
            gitList({
                current: 1,
                size: 20,
                name: name,
            }).then((res) => {
                console.log(res);
                _this.warehouse = res.data.records;
            });
        },
        // 仓库搜索
        remoteWarehouse(query) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.loadGitList(query);
            }, 500);
        },
        // 选择仓库
        selectWarehouse(data) {
            console.log(data);
            this.taskForm.gitId = data.gitId;
            this.taskForm.gitName = data.name;
        },
        // 里程碑选择
        loadMptList(data) {
            var _this = this;
            var name = "";
            if (data) {
                name = data;
            } else {
                name: "";
            }
            mptList(
                {
                    current: 1,
                    size: 20,
                    name: name,
                    projId: this.$route.query.projId
                },
                false
            ).then((res) => {
                console.log(res);
                _this.milepostForm = res.data.records;
            });
        },
        // 里程碑搜索
        remoteMpt(query) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.loadMptList(query);
            }, 500);
        },
        // 选择里程碑
        selectMpt(data) {
            console.log(data);
            this.taskForm.mptId = data.mptId;
            this.taskForm.mptName = data.name;
        },
        // 选择优先级
        priorityChoose(data) {
            if (data) {
                this.taskForm.matrix = data.value;
            } else {
                this.taskForm.matrix = "";
            }
        },
        // 选择负责人/协助人
        // personChoose(person, collaborators) {
        //     console.log(person);
        //     console.log(collaborators);
        //     if (person) {
        //         this.taskForm.masterUserName = person.userName;
        //         this.taskForm.masterUserId = person.userId;
        //     }
        //     this.taskForm.userList = collaborators;
        // },
        tagChoose(data) {
            console.log(data);
            this.taskForm.tags = data;
        },
        selectsuccess(data) {
            if (data.length > 0) {
                this.taskForm.masterUserId = data[0].userId;
                this.taskForm.masterUserName = data[0].userName;
            }
        },
        selectsuccessmamber(data) {
            console.log(data);
            var _this = this
            if (!utils.isNull(data)) {
                let userArrat = data.split(",");
                userArrat.forEach((item) => {
                    let uers = { userId: item };
                    _this.taskForm.userList.push(uers);
                });
            } else {
                _this.taskForm.userList = [];
            }
        },
    },
};
</script>

<style scoped>
.taskAdd {
    padding: 24px;
    box-sizing: border-box;
    flex: 1;
}

.taskAdd-header {
    font-size: 20px;
    color: #333333;
    font-weight: bold;
}

.taskAdd-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
}

.taskAdd-row-title {
    width: 700px;
    margin-right: 10px;
}

.taskAdd-row-type {
    width: 200px;
}

.taskAdd-row-personInCharge {
    margin-right: 10px;
}

.task-project {
    width: 160px;
    margin-right: 10px;
}

.task-warehouse {
    width: 160px;
    margin-right: 10px;
}

.task-milepost {
    width: 200px;
    margin-right: 10px;
}

.task-quillEditor {
    margin-top: 20px;
}

.task-multipleChoiceTags {
    width: 910px;
    margin-top: 20px;
}

.task-more {
    clear: both;
    margin: 16px 0;
    color: #333333;
    font-size: 16px;
    display: block;
    font-weight: bold;
}

.task-date {
    width: 345px;
    margin-right: 10px;
}

.task-time {
    width: 200px;
}

.task-save {
    margin-bottom: 20px;
    margin-top: 20px;
}

/deep/.el-select {
    margin-bottom: 0px !important;
}

/deep/.el-input--medium {
    height: 100% !important;
}
</style>
